<template>
  <view class="container">
    <!-- 头部固定区域 -->
    <view class="header">
      <view class="title-container">
        <view class="title">我的申报</view>
        <view class="title-actions">
          <uni-icons class="action-icon" type="search" size="20" color="#333" @click="showSearchPopup"></uni-icons>
          <uni-icons class="action-icon" type="list" size="20" color="#333" @click="showFilterPopup"></uni-icons>
          <uni-icons
              class="action-icon"
              type="refresh"
              size="20"
              color="#333"
              @click="resetSearch"
          />
        </view>
      </view>
    </view>
    <!-- 搜索弹出层 -->
    <uni-popup ref="searchPopup" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">搜索</text>
          <uni-icons type="close" size="20" color="#333" @click="closeSearchPopup"></uni-icons>
        </view>
        <view class="search-box">
          <uni-icons class="search-icon" type="search" size="16" color="#999"></uni-icons>
          <input
              class="search-input"
              type="text"
              v-model="searchText"
              placeholder="搜索标题"
              @input="handleSearchInput"
          />
          <uni-icons
              class="reset-icon"
              type="clear"
              size="16"
              color="#999"
              @click="resetSearch"
              v-show="searchText"
          />
        </view>
        <!-- 新增铅封编号搜索框 -->
        <view class="search-box" style="margin-top: 20rpx;">
          <uni-icons class="search-icon" type="search" size="16" color="#999"></uni-icons>
          <input
              class="search-input"
              type="text"
              v-model="searchSnCode"
              placeholder="搜索铅封编号"
              @input="handleSearchInput"
          />
          <uni-icons
              class="reset-icon"
              type="clear"
              size="16"
              color="#999"
              @click="searchSnCode = ''"
              v-show="searchSnCode"
          />
        </view>
      </view>
    </uni-popup>
    <!-- 业务类型页签 -->
    <scroll-view class="type-scroll" scroll-x>
      <view class="type-list">
        <view
            v-for="(item, index) in typeList"
            :key="index"
            :class="['type-item', currentType === item.value ? 'type-active' : '']"
            @click="selectType(item.value)"
        >
          <text class="type-label">{{ item.text }}</text>
          <template v-if="item.value !== 'TRUCK_INIT'">
            <uni-icons :type="getTypeIcon(item.value)" :size="20"
                       :color="currentType === item.value ? '#ffffff' : getTypeColor(item.value)"></uni-icons>
          </template>
          <template v-else>
            <image src="/static/images/function/myToDo/car.png" style="width: 20px; height: 20px;"/>
          </template>
        </view>
      </view>
    </scroll-view>
    <!-- 筛选弹出层 -->
    <uni-popup ref="filterPopup" type="center" :mask-click="false">
      <view class="popup-content" style="overflow: visible;">
        <view class="popup-header">
          <text class="popup-title">筛选</text>
          <uni-icons type="close" size="20" color="#333" @click="closeFilterPopup"></uni-icons>
        </view>
        <view class="filter-content" style="overflow: visible;">
          <view class="filter-section">
            <text class="filter-title">状态</text>
            <view class="popup-form-content" style="position: relative; z-index: 999;">
              <uni-data-select
                  v-model="currentStatus"
                  :localdata="statusList.map((item, index) => ({
                  value: item.value,
                  text: item.label
                }))"
                  placeholder="请选择状态"
                  :clear="false"
                  @change="handleStatusChange"
                  :popup-style="{position: 'absolute', zIndex: 1000}"
              />
            </view>
          </view>
          <!-- 移除以下popup-footer部分 -->
        </view>
      </view>
    </uni-popup>
    <!-- 列表内容区域 -->
    <scroll-view
        class="content-scroll"
        scroll-y
        @scrolltolower="loadMore"
        refresher-enabled
        :refresher-triggered="isRefreshing"
        @refresherrefresh="onRefresh"
    >
      <view class="list-container">
        <view
            v-for="(item, index) in listData"
            :key="index"
            class="card"
            @click="goDetail(item)"
        >
          <view class="card-left">
            <uni-icons :type="getTypeIcon(item.type)" :size="24" :color="getTypeColor(item.type)"></uni-icons>
          </view>
          <view class="card-content">
            <view class="card-header">
              <text class="card-title">{{ item.title }}</text>
              <text :class="['status-tag', `status-${item.status.toLowerCase()}`]">{{
                  getStatusText(item.status)
                }}
              </text>
            </view>
            <view class="card-info">
              <text>{{ item.department }}</text>
              <text class="separator">|</text>
              <text>{{ item.reporter }}</text>
            </view>
            <!-- 新增铅封编号显示 -->
            <view class="card-sn" v-if="item.snCode">{{ item.snCode }}</view>
            <view class="card-desc" v-if="false">{{ item.description }}</view>
            <view class="card-footer">
              <text class="type-text">{{ getTypeText(item.type) }}</text>
            </view>
          </view>
        </view>
        <!-- 空状态 -->
        <view v-if="listData.length === 0" class="empty-state">
          <uni-icons type="info" size="64" color="#CCCCCC"></uni-icons>
          <text class="empty-text">暂无数据</text>
        </view>
        <!-- 加载更多 -->
        <view v-if="loading" class="loading">
          <uni-icons type="spinner-cycle" size="20" color="#999"></uni-icons>
          <text class="loading-text">加载中...</text>
        </view>
      </view>
    </scroll-view>
    <!-- 详情弹出层 -->
    <uni-popup ref="detailPopup" type="center">
      <view class="detail-popup">
        <view class="popup-header">
          <text class="popup-title">详情</text>
          <uni-icons type="close" size="20" color="#333" @click="closeDetailPopup"></uni-icons>
        </view>
        <view class="detail-content">
          <template v-if="currentDetail">
            <view class="detail-title">{{ currentDetail.title }}</view>
            <view class="detail-sn" v-if="currentDetail.snCode">{{ currentDetail.snCode }}</view>
            <view class="detail-row">
              <view class="detail-col">
                <text class="detail-label">部门</text>
                <text class="detail-value">{{ currentDetail.department }}</text>
              </view>
              <view class="detail-col">
                <text class="detail-label">报告人</text>
                <text class="detail-value">{{ currentDetail.reporter }}</text>
              </view>
            </view>
            <view class="detail-row">
              <view class="detail-col">
                <text class="detail-label">状态</text>
                <text class="detail-value">{{ getStatusText(currentDetail.status) }}</text>
              </view>
              <view class="detail-col">
                <text class="detail-label">类型</text>
                <text class="detail-value">{{ getTypeText(currentDetail.type) }}</text>
              </view>
            </view>
            <view class="detail-item">
              <text class="detail-label">描述</text>
              <text class="detail-value">{{ currentDetail.description }}</text>
            </view>
            <view class="detail-item" v-if="currentDetail.files && currentDetail.files.length">
              <text class="detail-label">附件</text>
              <view class="file-list">
                <view
                    v-for="(file, index) in currentDetail.files"
                    :key="index"
                    class="file-item"
                    @click="previewImage(file)"
                >
                  <uni-icons type="paperclip" size="16" color="#2979ff"></uni-icons>
                  <text class="file-name">{{ file.originalName || `附件${index + 1}` }}</text>
                </view>
              </view>
            </view>
          </template>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {findMyLaunchSealnoFlow, findMySealnoFlowDetail} from "@/api/function/sealnoFlow/sealnoFlow";
import {getFileInfo} from "@/api/function/common/upload";
import uniDataSelect from '@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue';
import config from '@/config.js';

const searchText = ref('');
const listData = ref([]);

const getImageUrl = (file) => {
  // 处理路径拼接逻辑
  let base = config.baseUrl;
  if (!base.endsWith('/')) base += '/';

  let path = file.name;
  if (path.startsWith('/')) path = path.slice(1);

  return base + path;
};

const previewImage = (file) => {
  uni.previewImage({
    urls: [getImageUrl(file)],
    current: getImageUrl(file),
    longPressActions: {
      itemList: ['保存图片'],
      success: (res) => {
        if (res.tapIndex === 0) {
          uni.downloadFile({
            url: getImageUrl(file),
            success: (downloadRes) => {
              if (downloadRes.statusCode === 200) {
                uni.saveImageToPhotosAlbum({
                  filePath: downloadRes.tempFilePath,
                  success: () => {
                    uni.showToast({ title: '保存成功' });
                  },
                  fail: (err) => {
                    if (err.errMsg.includes('auth deny')) {
                      // 处理权限问题
                    }
                  }
                });
              }
            }
          });
        }
      }
    }
  });
};

const handleImageError = (file, index) => {
  console.error(`图片加载失败: ${file.name}`);
  // 可选：使用默认图片
  // file.name = '/static/default-image.png';
};

// 在接口返回数据处理处添加字段映射
const processResponseData = (data) => {
  return data.rows.map(item => ({
    id: item.id,
    title: item.title,
    department: item.deptName || '未知部门',
    reporter: item.userName || '未知用户',
    status: item.status,
    description: item.errorDescription || item.remark || '无描述',
    type: item.businessType,
    eventId: item.errEventId,
    files: item.fileIds ? item.fileIds.split(',').map(fileId => ({id: fileId})) : [], // 将文件ID转换为对象
    snCode: item.snCode
  }));
};

const currentStatus = ref('');
const currentType = ref('');
const isRefreshing = ref(false);
const loading = ref(false);
const searchPopup = ref();
const filterPopup = ref();
const showSearchPopup = () => {
  searchPopup.value.open();
};

const closeSearchPopup = async () => {
  searchPopup.value.close();

  // 搜索时调用接口
  try {
    const res = await findMyLaunchSealnoFlow(1, 10, {
      title: searchText.value,
      businessType: currentType.value, // 保留页签条件
      status: currentStatus.value // 保留状态条件
    });
    listData.value = processResponseData(res);
  } catch (error) {
    console.error('搜索失败:', error);
  }
};
const showFilterPopup = () => {
  filterPopup.value.open();
};
const closeFilterPopup = () => {
  filterPopup.value.close();
};
const searchSnCode = ref(''); // 新增铅封编号搜索

const selectType = async (value: string) => {
  currentType.value = value;
  try {
    const res = await findMyLaunchSealnoFlow(1, 10, {
      businessType: value,
      title: searchText.value,
      status: currentStatus.value,
      snCode: searchSnCode.value, // 添加铅封编号
      errEventId: currentPageOptions.value.errEventId
    });
    console.log('类型筛选返回数据:', res);
    listData.value = processResponseData(res);
  } catch (error) {
    console.error('类型筛选失败:', error);
  }
};

const handleStatusChange = async (status: string) => {
  currentStatus.value = status;
  try {
    const res = await findMyLaunchSealnoFlow(1, 10, {
      status: status,
      title: searchText.value,
      businessType: currentType.value,
      snCode: searchSnCode.value // 添加铅封编号
    });
    console.log('状态筛选返回数据:', res);
    listData.value = processResponseData(res);
  } catch (error) {
    console.error('状态筛选失败:', error);
  }
};

const handleSearchInput = () => {
  if (searchTimer) {
    clearTimeout(searchTimer);
  }

  searchTimer = setTimeout(async () => {
    try {
      const res = await findMyLaunchSealnoFlow(1, 10, {
        title: searchText.value,
        status: currentStatus.value,
        businessType: currentType.value,
        snCode: searchSnCode.value // 添加铅封编号
      });
      console.log('搜索返回数据:', res);
      listData.value = processResponseData(res);
    } catch (error) {
      console.error('搜索失败:', error);
    } finally {
      searchTimer = null;
    }
  }, 500);
};
const statusList = [
  {label: '已提交', value: 'COMMIT'},
  {label: '已通过', value: 'PASSED'},
  {label: '二次审批', value: 'RECECK'},
  {label: '二次审批通过', value: 'REPASS'},
  {label: '已作业', value: 'FINISH'},
  {label: '异常结束', value: 'ERROR_FINISH'}
];
// const typeList = [
//   {text: '全部', value: ''},
//   {text: '异常施封', value: 'SPECIAL'},
//   {text: '小额配送', value: 'CUSTOM_SEND'},
//   {text: '采购', value: 'BUY'},
//   {text: '入库', value: 'STORE'},
//   {text: '调拨', value: 'TRANS'},
//   {text: '固封施打', value: 'FIXED_WORK'},
//   {text: '维修', value: 'REPAIR'},
//   {text: '新车', value: 'TRUCK_INIT'}
// ];
const typeList = [
  {text: '全部', value: ''},
  {text: '异常施封', value: 'SPECIAL'},
  {text: '小额配送', value: 'CUSTOM_SEND'},
  {text: '车辆维修', value: 'REPAIR'},
  {text: '新车施打', value: 'TRUCK_INIT'}
];
const getTypeIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    BUY: 'cart',
    STORE: 'download',
    TRANS: 'refresh',
    FIXED_WORK: 'locked',
    REPAIR: 'settings',
    TRUCK_INIT: 'image',  // 改为使用图片
    CUSTOM_SEND: 'gift',
    SPECIAL: 'flag'
  };
  return iconMap[type] || 'info';
};
const getTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    BUY: '#2979ff',
    STORE: '#2979ff',
    TRANS: '#19be6b',
    FIXED_WORK: '#19be6b',
    REPAIR: '#ff9900',
    TRUCK_INIT: '#ff9900',
    CUSTOM_SEND: '#9c26b0',
    SPECIAL: '#9c26b0'
  };
  return colorMap[type] || '#999';
};
const getTypeText = (type: string) => {
  return typeList.find(item => item.value === type)?.text || '';
};
const getStatusText = (status: string) => {
  return statusList.find(item => item.value === status)?.label || '';
};

const currentPageOptions = ref({errEventId: ''});

onMounted(async () => {
  // 调用接口获取数据
  try {
    const res = await findMyLaunchSealnoFlow(1, 10, {}); // 移除errEventId参数
    console.log('初始化返回数据:', res);
    listData.value = processResponseData(res);
  } catch (error) {
    console.error('获取数据失败:', error);
  }
});
let searchTimer: ReturnType<typeof setTimeout> | null = null;
const loadMore = () => {
  if (loading.value) return;
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
};
const onRefresh = () => {
  isRefreshing.value = true;
  setTimeout(() => {
    isRefreshing.value = false;
  }, 1000);
};
const goDetail = (item: any) => {
  showDetailPopup(item);
};

const resetSearch = async () => {
  console.log('开始重置搜索');
  searchText.value = '';
  searchSnCode.value = ''; // 同时重置铅封编号
  try {
    const res = await findMyLaunchSealnoFlow(1, 10, {
      businessType: currentType.value,
      errEventId: currentPageOptions.value.errEventId
    });
    console.log('重置搜索返回数据:', res);
    listData.value = processResponseData(res);
  } catch (error) {
    console.error('重置搜索失败:', error);
  }
};

const currentDetail = ref(null);
const detailPopup = ref();

const showDetailPopup = async (item) => {
  try {
    // 调用接口获取详情数据
    const res = await findMySealnoFlowDetail(item.id);
    console.log('详情数据:', res);
    currentDetail.value = {
      ...item,
      ...res.data
    };

    // 获取并处理文件信息
    // 获取并处理文件信息
    if (currentDetail.value.files && currentDetail.value.files.length) {
      const fileInfos = await Promise.all(
          currentDetail.value.files.map(async (file) => {
            try {
              const res = await getFileInfo(file.id);
              console.log("res", res);
              return {
                ...file,
                ...res.data // 合并接口返回的所有属性
              };
            } catch (error) {
              console.error("获取文件信息失败:", error);
              return file;
            }
          })
      );
      currentDetail.value.files = fileInfos;
      console.log('文件详细信息:', fileInfos);
    }
    detailPopup.value.open();
  } catch (error) {
    console.error('获取详情失败:', error);
    uni.showToast({
      title: '获取详情失败',
      icon: 'none'
    });
  }
};

const closeDetailPopup = () => {
  detailPopup.value.close();
};

</script>
<style>
page {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
}

.header {
  flex-shrink: 0;
  background-color: #ffffff;
  padding: 20rpx;
  border-bottom: 1px solid #f0f0f0;
}

.title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.title-actions {
  display: flex;
  align-items: center;
  gap: 24rpx;
}

.action-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-content {
  background-color: #ffffff;
  border-radius: 12rpx;
  width: 600rpx;
  padding: 30rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.popup-title {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  position: relative;
  padding-left: 24rpx;
}

.popup-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 28rpx;
  background-color: #2979ff;
  border-radius: 3rpx;
}

.detail-content {
  max-height: 800rpx;
  overflow-y: auto;
  margin-top: 30rpx;
  padding-right: 20rpx;
}

.detail-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
}

.detail-sn {
  font-size: 16px; /* 比标题小一号 */
  color: #666666; /* 颜色稍浅 */
  margin-bottom: 20rpx;
}

.detail-row {
  display: flex;
  gap: 20rpx;
  margin-bottom: 32rpx;
}

.detail-col {
  flex: 1;
  padding: 24rpx;
  background-color: #f8f9fc;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.detail-col:hover {
  background-color: #f0f2f9;
}

.detail-item {
  margin-bottom: 32rpx;
  padding: 24rpx;
  background-color: #f8f9fc;
  border-radius: 16rpx;
  transition: all 0.3s ease;
}

.detail-item:hover {
  background-color: #f0f2f9;
}

.detail-label {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 12rpx;
  display: block;
  font-weight: 500;
}

.detail-value {
  font-size: 16px;
  color: #262626;
  word-break: break-all;
  line-height: 1.5;
  font-weight: 400;
}

.filter-content {
  max-height: 800rpx;
  overflow-y: auto;
}

.filter-title {
  font-size: 14px;
  color: #333333;
  margin-bottom: 20rpx;
}

.type-scroll {
  background-color: #ffffff;
  padding: 20rpx;
  flex-shrink: 0;
  border-bottom: 1px solid #f0f0f0;
}

.type-list {
  display: flex;
  padding: 10rpx 0;
}

.popup-footer {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}

.reset-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  color: #333333;
  background-color: #ffffff;
}

.confirm-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 14px;
  color: #ffffff;
  background-color: #2979ff;
}

.search-box {
  position: relative;
  margin-bottom: 20rpx;
}

.search-icon {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
}

.reset-icon {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.search-input {
  background-color: #f5f5f5;
  height: 72rpx;
  border-radius: 36rpx;
  padding: 0 60rpx;
  font-size: 14px;
}

.filter-section {
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.type-scroll {
  overflow: auto;
}

.type-list {
  display: flex;
  padding: 10rpx 0;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 24rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
  white-space: nowrap;
  transition: all 0.3s;
  min-width: 120rpx;
}

.type-label {
  font-size: 14px;
  color: #666666;
  margin-bottom: 12rpx;
}

.type-active {
  background-color: #2979ff;
}

.type-active .type-label {
  color: #ffffff;
}

.status-filter {
  padding: 0 20rpx;
}

.content-scroll {
  flex: 1;
  overflow: auto;
}

.list-container {
  padding: 20rpx;
}

.card {
  display: flex;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.card-left {
  margin-right: 20rpx;
  display: flex;
  align-items: center;
}

.card-content {
  flex: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.status-tag {
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  font-size: 12px;
}

.status-commit {
  background-color: #e1f0ff;
  color: #2979ff;
}

.status-passed {
  background-color: #e1f9eb;
  color: #19be6b;
}

.status-recheck {
  background-color: #fdf6ec;
  color: #ff9900;
}

.status-repass {
  background-color: #d4edda;
  color: #155724;
}

.status-finish {
  background-color: #f4f4f5;
  color: #909399;
}

.status-error_finish {
  background-color: #fef0f0;
  color: #f56c6c;
}

.card-info {
  font-size: 14px;
  color: #666666;
  margin-bottom: 12rpx;
}

.separator {
  margin: 0 12rpx;
  color: #999999;
}

.card-desc {
  font-size: 14px;
  color: #666666;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.card-footer {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999999;
}

.type-text {
  margin-right: 16rpx;
}

.event-id {
  margin-right: 16rpx;
}

.file-info {
  display: flex;
  align-items: center;
}

.file-count {
  margin-left: 4rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  margin-top: 20rpx;
  font-size: 14px;
  color: #999999;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.loading-text {
  margin-left: 12rpx;
  font-size: 14px;
  color: #999999;
}

.detail-popup {
  background-color: #ffffff;
  border-radius: 24rpx;
  width: 680rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.detail-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
}

.detail-row {
  display: flex;
  margin-bottom: 20rpx;
}

.detail-col {
  flex: 1;
}

.detail-label {
  font-size: 14px;
  color: #999999;
  margin-bottom: 8rpx;
  display: block;
}

.detail-value {
  font-size: 14px;
  color: #333333;
}

.detail-item {
  margin-bottom: 20rpx;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 16rpx;
  background-color: #ffffff;
  border-radius: 8rpx;
  cursor: pointer;
}

.file-name {
  font-size: 14px;
  color: #2979ff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px; /* 根据需要调整最大宽度 */
}

.popup-footer {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
}

.reset-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  border: 1px solid #dcdfe6;
  font-size: 14px;
  color: #333333;
  background-color: #ffffff;
}

.confirm-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 14px;
  color: #ffffff;
  background-color: #2979ff;
}

.search-box {
  position: relative;
  margin-bottom: 20rpx;
}

.search-icon {
  position: absolute;
  left: 20rpx;
  top: 50%;
  transform: translateY(-50%);
}

.reset-icon {
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.search-input {
  background-color: #f5f5f5;
  height: 72rpx;
  border-radius: 36rpx;
  padding: 0 60rpx;
  font-size: 14px;
}

.filter-section {
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.type-scroll {
  overflow: auto;
}

.type-list {
  display: flex;
  padding: 10rpx 0;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 24rpx;
  margin-right: 20rpx;
  border-radius: 12rpx;
  background-color: #f5f5f5;
  white-space: nowrap;
  transition: all 0.3s;
  min-width: 120rpx;
}

.type-label {
  font-size: 14px;
  color: #666666;
  margin-bottom: 12rpx;
}

.type-active {
  background-color: #2979ff;
}

.type-active .type-label {
  color: #ffffff;
}

.status-filter {
  padding: 0 20rpx;
}

.content-scroll {
  flex: 1;
  overflow: auto;
}

.list-container {
  padding: 20rpx;
}

.card {
  display: flex;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.card-left {
  margin-right: 20rpx;
  display: flex;
  align-items: center;
}

.card-content {
  flex: 1;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.status-tag {
  padding: 4rpx 16rpx;
  border-radius: 4rpx;
  font-size: 12px;
}

.status-commit {
  background-color: #e1f0ff;
  color: #2979ff;
}

.status-passed {
  background-color: #e1f9eb;
  color: #19be6b;
}

.status-recheck {
  background-color: #fdf6ec;
  color: #ff9900;
}

.status-repass {
  background-color: #d4edda;
  color: #155724;
}

.status-finish {
  background-color: #f4f4f5;
  color: #909399;
}

.status-error_finish {
  background-color: #fef0f0;
  color: #f56c6c;
}

.card-info {
  font-size: 14px;
  color: #666666;
  margin-bottom: 12rpx;
}

.separator {
  margin: 0 12rpx;
  color: #999999;
}

.card-desc {
  font-size: 14px;
  color: #666666;
  margin-bottom: 16rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.card-footer {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999999;
}

.type-text {
  margin-right: 16rpx;
}

.event-id {
  margin-right: 16rpx;
}

.file-info {
  display: flex;
  align-items: center;
}

.file-count {
  margin-left: 4rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-text {
  margin-top: 20rpx;
  font-size: 14px;
  color: #999999;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}

.loading-text {
  margin-left: 12rpx;
  font-size: 14px;
  color: #999999;
}
</style>
